<template>
<div class="box2">
    <el-form :model="ruleForm" :rules="rules" :inline="false" ref="ruleForm" label-width="200px" class="demo-ruleForm" size="medium">
        <div class="must">

            <el-form-item label="受让人类型：" prop="aassPicType">
                <el-select v-model="ruleForm.aassPicType" placeholder="请选择申请人类型" @change="changeAassPicType">
                    <el-option v-for="(item,index) in identityOptions" :label="item.title" :key="index" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <!-- 正面 -->
            <el-form-item class="upload" v-if="ruleForm.aassPicType==1?true:false" label="身份证(正面)：" prop="IDC" :rules=" {  required: true,validator:hasIDC,trigger: 'change' }" :show-message="!showIDC">
                <div>
                    <upfile :callback="setIDC" v-loading="loadIDC">
                        <img class="upload-img" :src="img_default['IDC']" v-if="img_default['IDC']" />
                    </upfile>
                    <div class="exam-img">
                        <div class="img-inform" style="width=60px">
                            <img src="../../assets/imgs/inform.png">
                            <span>示例:</span>
                        </div>
                        <examimg :imgType="2"></examimg>
                    </div>
                    <span style="color:#f96900">请上传 身份证正反面 清晰图片(jpg,png格式)，图片大小不能超过1M</span>
                </div>
            </el-form-item>

            <!-- 正反面新增 -->
            <el-form-item v-if="ruleForm.aassPicType== 1" class="upload" label="受让人身份证(正反面)：" prop="iddbimage"
             :rules=" {  required: true,validator:hasIddbimage,trigger: 'change'  }" :show-message="!showIddbimage">
              <div>
                  <upfile :callback="setIddbimage">
                      <img class="upload-img" :src="img_default['iddbimage']" v-if="img_default['iddbimage']" />
                  </upfile>
                  <div class="exam-img">
                      <div class="img-inform">
                          <img src="../../assets/imgs/inform.png">
                          <span>示例:</span>
                      </div>
                      <examimg :imgType="1"></examimg>
                  </div>
              </div>
            </el-form-item>

            <!-- 营业执照 -->
            <el-form-item v-if="ruleForm.aassPicType!= 9" class="upload" label="受让人营业执照：" prop="BusinessLicense" :rules=" {  required: true,validator:hasBusinessLicense,trigger: 'change'  }" :show-message="!showBusinessLicense">
                <div>
                    <upfile :callback="setBusinessLicense" v-loading="loadBusinessLicense">
                        <img class="upload-img" :src="img_default['BusinessLicense']" v-if="img_default['BusinessLicense']" />
                    </upfile>
                    <div class="exam-img">
                        <div class="img-inform">
                            <img src="../../assets/imgs/inform.png">
                            <span>示例:</span>
                        </div>
                        <examimg :imgType="0"></examimg>
                    </div>
                </div>
            </el-form-item>

            <el-form-item class="upload" v-if="ruleForm.aassPicType==9?true:false" label="其他有效证件：" prop="Other" :rules=" {  required: true,validator:hasOther,trigger: 'change' }" :show-message="!showOther">
                <div>
                    <upfile :callback="setOther" v-loading="loadOther">
                        <img class="upload-img" :src="img_default['Other']" v-if="img_default['Other']" />
                    </upfile>
                    <span style="color:#f96900">请上传 其他有效证件</span>
                </div>
            </el-form-item>

            <el-form-item label="受让人名称(中文)：" prop="aassNameCn">
                <el-input v-model="ruleForm.aassNameCn" placeholder="请填写受让人名称(中文)"></el-input>
                <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <!-- <span>提醒：主体名称/公司名称</span> -->
                        <span>示例：北京市xxx网络科技有限公司/张三</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="(英文)：" prop="aassNameEn">
                <el-input v-model="ruleForm.aassNameEn" placeholder="请填写受让人名称(英文)"></el-input>

            </el-form-item>
            <el-form-item label="受让人地址(中文)：" prop="aassAddCn">
                <el-input v-model="ruleForm.aassAddCn" placeholder="请填写受让人地址(中文)"></el-input>
                <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <!-- <span>提醒：营业执照地址</span> -->
                        <span>示例：北京市xx区xx街xx号</span>
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="(英文)：" prop="aassAddEn">
                <el-input v-model="ruleForm.aassAddEn" placeholder="请填写受让人地址(英文)"></el-input>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：国内可不填写</span>
                    </div>
                </div> -->
            </el-form-item>

            <el-form-item label="申请号：" prop="appNum">
                <el-input v-model="ruleForm.appNum" placeholder="请填写申请号"></el-input>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：申请号不能为空</span>
                    </div>
                </div> -->
            </el-form-item>
            <!-- issue 地址要填 名字可以不填？ -->
            <el-form-item label="外国受让人的国内接收人：" prop="ReceCn">
                <el-input v-model="ruleForm.ReceCn" placeholder="请填写国内接收人"></el-input>
            </el-form-item>
            <el-form-item label="国内接收人地址：" prop="ReceAddCn">
                <el-input v-model="ruleForm.ReceAddCn" placeholder="请填写国内接收人地址"></el-input>
            </el-form-item>
            <el-form-item label="接收人邮政编码：" prop="postCodeCn">
                <el-input v-model="ruleForm.postCodeCn" placeholder="请填写接收人邮政编码"></el-input>
            </el-form-item>

            <el-form-item label="证明文件：" prop="transferProve"
            :rules=" {  required: true,validator:hasdocumentary,trigger: 'change' }"  :show-message="!showtransferProve" :inline-message="true">
                    <upfile :callback="settransferProve">
                        <img class="upload-img" :src="img_default['transferProve']" v-if="img_default['transferProve']" />
                    </upfile>
                    <div class="exam-img">
                        <div class="img-inform" style="width=60px">
                            <img src="../../assets/imgs/inform.png">
                            <span>示例:</span>
                        </div>
                        <examimg :imgType="5"></examimg>
                    </div>
            </el-form-item>

            <el-form-item class="upload" label="网上确认书：" prop="qrfile"
            :rules=" {  required: true,validator:hasQrfile,trigger: 'change' }" :show-message="!showQrfile" :inline-message="true">
                <div>
                    <upfile :callback="setSure">
                        <img class="upload-img" :src="img_default['qrfile']" v-if="img_default['qrfile']" />
                    </upfile>
                    <div class="exam-img">
                        <div class="img-inform">
                            <img src="../../assets/imgs/inform.png">
                            <span>示例:</span>
                        </div>
                        <examimg :imgType="7"></examimg>
                    </div>
                </div>
                <div>
                    <span class="informs">
                        请点此
                        <a :href="mconfig.host + '/file/download?fileType=4'">下载网上确认书</a>,查到相应商标编号并填充
                    </span>
                    <br />
                    <span class="notice">请将下载的网上确认书填写完成, 然后上传JPG文件或是PNG文件</span>
                </div>
            </el-form-item>
            <el-form-item label="其他附件：">
              <uploads
                  :callback="backUrl"
                  :delUrl="delUrl"
                  :file_config="{field:'dengjichenluofile'}"
                  :list="ruleForm.dengjichenluofile"></uploads>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                  <span>提示：其他附件</span>
                </div>
              </div>
            </el-form-item>
            <div class="line"></div>
            <el-form-item label="是否共有商标： " prop="isComm">
                <el-radio-group v-model="ruleForm.isComm">
                    <el-radio class="input" :label="1" style="width:100px">是</el-radio>
                    <el-radio class="input" :label="0">否</el-radio>
                </el-radio-group>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：选项不能为空</span>
                    </div>
                </div> -->
            </el-form-item>

            <el-form-item label="其他共有申请人" v-if="ruleForm.isComm ==1"></el-form-item>

            <el-form-item label="其他转让人：" v-if="ruleForm.isComm ==1">
                <both :callback="getBothZ" :append="alterAppendZ" :class_id="$route.query.id"></both>
            </el-form-item>
            <el-form-item label="其他受让人：" v-if="ruleForm.isComm ==1">
                <both :callback="getBothS" :append="alterAppendS" :class_id="$route.query.id"></both>
            </el-form-item>

            <div class="btns">
                <el-button type="primary" @click="outStep">上一步</el-button>
                <el-button type="primary" @click="testing('ruleForm')">提交并审核</el-button>
            </div>
            <el-dialog class="dialog" :show-close="false" :center="true" :visible.sync="dialogVisible" width="460px" :before-close="handleClose">
                <div class="hint">
                    <img src="../../assets/imgs/branch.png" alt="提示图片" />
                    <span>选择您想去办理的网点</span>
                </div>
                <el-form-item label="选择网点：" prop="value" >
                    <el-select v-model="ruleForm.branchNetworkId" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.deptId" :label="item.deptName" :value="item.deptId"></el-option>
                    </el-select>
                </el-form-item>
                <div slot="footer" class="dialog-footer">
                    <el-button type="info" @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog class="hintMsg" :show-close="false" title="温馨提示" :visible.sync="centerDialogVisible" width="462px" @clos='skip' :before-close="handleClose">
                <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="skip">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </el-form>
</div>
</template>

<script>
import upfile from "../common/upfile.vue";
import both from "../common/both.vue";
import examimg from "../common/imgExample";
import uploads from "@/components/common/uploads";
export default {
    data() {
        return {
            //转让受让人类型list
            identityOptions: [],

            //网点列表
            options: [],
            //提交成功弹出框变量
            centerDialogVisible: false,
            //网点弹出框控制变量
            dialogVisible: false,
            //提交表单
            formData: new FormData(),
            //表单唯一id
            classId: "",

            // 是否有网上确认书
            showQrfile: "",
            showtransferProve:"",
            // 是否有营业执照
            showBusinessLicense: "",
            //是否有正反面
            showIddbimage: "",
            // 是否身份证正面

            // 是否有身份证
            showIDC: "",

            // 是否有其他有效证件
            showOther: "",

            // 是否有网上确认书
            loadQrfile: "",

            // 是否有营业执照
            loadBusinessLicense: "",
            //是否有正反面
            loadIddbimage:"",
            // 是否有省份证
            loadIDC: "",

            // 是否有效证件
            loadOther: "",

            aassPicTypeTitle: "", //受让人默认title
            aassPicTypeValue: "", //受让人默认值

            //填写的信息
            ruleForm: {
                // 其他附件
                dengjichenluofile:[],
                //共有商标
                // 转让人
                common: [{
                    name: "名称(中文)：",
                    englishName: "(英文)：",
                    site: "地址(中文)：",
                    englishSite: "(英文)：",

                    // 这下面才是表单值
                    type: 1,
                    partNameCh: "", //转让人名称（中文）
                    partNameEn: "", //转让人名称（英文）
                    partAddrCh: "", //转让人地址（中文）
                    partAddrEn: "", //转让人地址（英文）
                }, ],
                // 受让人
                commons: [{
                    name: "名称(中文)：",
                    englishName: "(英文)：",
                    site: "地址(中文)：",
                    englishSite: "(英文)：",

                    // 这下面才是表单值
                    type: 2,
                    partNameCh: "", //转让人名称（中文）
                    partNameEn: "", //转让人名称（英文）
                    partAddrCh: "", //转让人地址（中文）
                    partAddrEn: "", //转让人地址（英文）
                }, ],

                // aassPicType: "", //受让人类型
                appNum: "",
                isComm: 0, //是否共有商标
                ReceCn: "", //外国受让人的国内接收人
                ReceAddCn: "", //国内接收人地址
                aassNameCn: "", //受让人名称（中文）
                aassNameEn: "", //受让人名称（英文）
                aassAddCn: "", //受让人地址（中文）
                aassAddEn: "", //受让人地址（英文）
                TranNameCn: "", //转让人名称（中文）
                TranNameEn: "", //转让人名称（英文）
                TranAddCn: "", //转让人地址（中文）
                TranAddEn: "", //转让人地址（英文）
                postCodeCn: "", //接受人邮编
                branchNetworkId: "", //网点编号

                qrfiles: "", //确认书
                aassPicType: 0, //受让人类别
                aassLicense: "", //受让人营业照
                aassIDC: "", //受让人身份证正反面
                aassOther: "", //其他有效证件

                BusinessLicense: "", //受让人营业照文件
                iddbimage:"",
                IDC: "", //受让人身份证正反面文件
                Other: "", //受让人有效文件文件
                transferProve:"",//证明文件
                newTransferProve:"",
                //身份证正反面照片
                // iddbimage: "",

                commonArr: [{
                    partNameCh: "",
                    partNameEn: "",
                    partAddrCh: "",
                    partAddrEn: "",
                }, ],
                commonArrs: [{
                    partNameCh: "",
                    partNameEn: "",
                    partAddrCh: "",
                    partAddrEn: "",
                }, ],
            },
            rulesCommonpartNameEn: [{
                pattern: /^.{0,255}$/,
                message: "您的输入太长",
                trigger: "blur",
            }, ],
            rulesCommonpartAddrEn: [{
                pattern: /^.{0,255}$/,
                message: "您的输入太长",
                trigger: "blur",
            }, ],
            rulesCommonpartNameCh: [{
                    required: true,
                    message: '选项不能为空',
                    trigger: 'blur'
                },
                {
                    pattern: /^[\u0391-\uFFE5A-Za-z]+$/,
                    message: "请输入正确的机构名称",
                    trigger: "blur",
                },
            ],
            rulesCommonpartAddrCh: [{
                    required: true,
                    message: '选项不能为空',
                    trigger: 'blur'
                },
                {
                    pattern: /^.{2,50}$/,
                    message: "您的输地址长度不符合要求",
                    trigger: "blur",
                },

            ],

            rules: {
                // 其他附件
                dengjichenluofile: [
                  { required: true, message: "附件不能为空", trigger: "change" },
                ],
                aassPicType: [{
                    required: true,
                    message: "选项不能为空",
                    trigger: "change"
                }, ],
                aassNameCn: [
                    // 受让人名称
                    {
                        required: true,
                        message: "选项不能为空",
                        trigger: "change"
                    },
                    {
                        pattern: /^[\u4e00-\u9fa5\(\)()\da-zA-Z&]{2,50}$/gi,
                        message: "名字输入错误",
                        trigger: "blur"
                    },

                ],
                aassNameEn: [{
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                aassAddEn: [{
                    pattern: /^.{0,255}$/,
                    message: "您的输入太长",
                    trigger: "blur",
                }, ],
                aassAddCn: [
                    // 受让人地址
                    {
                        required: true,
                        message: "选项不能为空",
                        trigger: "change"
                    },
                    {
                        pattern: /^.{2,50}$/,
                        message: "您的输地址长度不符合要求",
                        trigger: "blur",
                    },
                    {
                        pattern: /^.{0,255}$/,
                        message: "您的输入太长",
                        trigger: "blur",
                    },
                ],
                ReceAddCn: [
                    // 国内接收人地址 //issue 外国受让人应当在申请书中指定其国内接收人负责接收国家知识产权局后继商标业务的法律文件
                    {
                        pattern: /^.{2,50}$/,
                        message: "您的输地址长度不符合要求",
                        trigger: "blur",
                    },
                    {
                        pattern: /^.{0,255}$/,
                        message: "您的输入太长",
                        trigger: "blur",
                    },
                ],

                appNum: [
                    // 申请号
                    {
                        required: true,
                        message: "选项不能为空",
                        trigger: "change"
                    },
                    {
                        pattern: /^.{0,255}$/,
                        message: "您的输入太长",
                        trigger: "blur",
                    },
                    // { pattern: /^[0-9]*$/, message: '请输入正确的申请号' }
                ],

                ReceCn: [{
                    pattern: /^[\u4e00-\u9fa5\(\)()\da-zA-Z&]{2,50}$/gi,
                    message: "名字输入错误",
                    trigger: "blur"
                }, ],
                postCodeCn: [{
                    pattern: /^[1-9]{1}(\d){5}$/,
                    message: "邮编格式错误",
                    trigger: "blur"
                }],

                isComm: [{
                    required: true,
                    message: "选项不能为空",
                    trigger: "change"
                }, ],

            },
            img_default: {},
            appendZ: [], //其他转让人信息
            appendS: [], //其他受让人信息
            alterAppendZ: [],
            alterAppendS: []
        };
    },
    components: {
        upfile,
        both,
        examimg,
        uploads,
    },
    mounted() {

        //身份列表
        this.identityOptions = this.mconfig.options;

        if (this.$store.state.stateJdg) {
            this.showQrfile = true
            this.showBusinessLicense = true;
            this.showIDC = true;
            this.iddbimage = true;
            this.showOther = true;
            this.showtransferProve = true
            this.$store.state.alterData.append.forEach(e => { //其它转让人的修改表单

                this.alterAppendZ.push(e);

            });
            this.$store.state.alterData.append2.forEach(e => { //其它转让人的修改表单

                this.alterAppendS.push(e);

            });
        }
        //获取从存储在路由中的classId
        this.classId = this.$route.query.id;
        console.log(this.$route.query.id);
        //获取网点列表
        this.$http.get("/trademark/system/dept/findDept")
            .then((res) => {
                this.options = res.data.data || [];
            }).catch((err) => {});
        if (this.$store.state.alterData.public) {

            let commdata = [];
            let commonArrdata = [];

            var prodata = this.$store.state.alterData.append;
            var prodata2 = this.$store.state.alterData.append2;
            if (!Array.isArray(prodata)) {
                prodata = [];
            }
            if (!Array.isArray(prodata2)) {
                prodata2 = [];
            }
            prodata2.forEach((item) => {

                commonArrdata.push({
                    name: "名称(中文)：",
                    englishName: "(英文)：",
                    site: "地址(中文)：",
                    englishSite: "(英文)：",
                    type: item.type,
                    partNameCh: item.partNameCh,
                    partNameEn: item.partNameEn,
                    partAddrCh: item.partAddrCh,
                    partAddrEn: item.partAddrEn,
                });

            });
            prodata.forEach((item) => {

                commdata.push({
                    name: "名称(中文)：",
                    englishName: "(英文)：",
                    site: "地址(中文)：",
                    englishSite: "(英文)：",
                    type: item.type,
                    partNameCh: item.partNameCh,
                    partNameEn: item.partNameEn,
                    partAddrCh: item.partAddrCh,
                    partAddrEn: item.partAddrEn,
                });

            });

            let {
                ageName, //代理机构名称
                appNum,
                isComm, //是否共有商标
                receCn, //外国受让人的国内接收人
                receAddCn, //国内接收人地址
                aassNameCn, //受让人名称（中文）
                aassNameEn, //受让人名称（英文）
                aassAddCn, //受让人地址（中文）
                aassAddEn, //受让人地址（英文）
                tranNameCn, //转让人名称（中文）
                tranNameEn, //转让人名称（英文）
                tranAddCn, //转让人地址（中文）
                tranAddEn, //转让人地址（英文）
                branchNetworkId, //网点编号
                postCodeCn, //接受人邮编
                qrfile, //确认书
                iddbimage,//正反面
                transfereesType,
                businessLicense, //营业执照
                idaddress, //身份证照
                picpath,
                transferProve,
                newTransferProve,
                otherfile,
            } = Object.assign(
                this.$store.state.alterData.data,
                this.$store.state.alterData.public
            );

            (this.ruleForm.ageName = ageName), //代理机构名称
            (this.ruleForm.appNum = appNum),
            (this.ruleForm.isComm = isComm * 1), //是否共有商标
            (this.ruleForm.ReceCn = receCn), //外国受让人的国内接收人
            (this.ruleForm.ReceAddCn = receAddCn), //国内接收人地址
            (this.ruleForm.aassNameCn = aassNameCn), //受让人名称（中文）
            (this.ruleForm.aassNameEn = aassNameEn), //受让人名称（英文）
            (this.ruleForm.aassAddCn = aassAddCn), //受让人地址（中文）
            (this.ruleForm.aassAddEn = aassAddEn), //受让人地址（英文）
            (this.ruleForm.TranNameCn = tranNameCn), //转让人名称（中文）
            (this.ruleForm.TranNameEn = tranNameEn), //转让人名称（英文）
            (this.ruleForm.TranAddCn = tranAddCn), //转让人地址（中文）
            (this.ruleForm.TranAddEn = tranAddEn), //转让人地址（英文）
            (this.ruleForm.branchNetworkId = Number(branchNetworkId)); //网点编号
            (this.ruleForm.postCodeCn = postCodeCn); //接受人邮编

            (this.ruleForm.newTransferProve = newTransferProve); //身份证正反面

            (this.ruleForm.aassIDC = idaddress); //身份证
            (this.ruleForm.iddbimage = picpath); //身份证正反面
            // 其他附件
            this.ruleForm.dengjichenluofile = JSON.parse(otherfile);
            if (transfereesType == 9) {
                this.ruleForm.aassLicense = "";
                this.ruleForm.aassOther = idaddress; //其他有效证件
            }

            if (qrfile) {
                this.img_default.qrfile = this.mconfig.host + qrfile;
            }
            if (transferProve) {
              this.img_default.transferProve = this.mconfig.host + transferProve;
              // console.log();
            }
            // transferProve
            if (iddbimage) {
                this.img_default.iddbimage = this.mconfig.host + iddbimage;
            }
            (this.ruleForm.common = commdata);
            (this.ruleForm.commons = commonArrdata);

            this.img_default.BusinessLicense = businessLicense ? this.mconfig.host + businessLicense : "";

            if (transfereesType == 9) {
                this.img_default.BusinessLicense = "";
                this.img_default.Other = businessLicense ? this.mconfig.host + businessLicense : "";
            }

            this.img_default.IDC = idaddress ? this.mconfig.host + idaddress : "";
            (this.ruleForm.aassPicType = Number(transfereesType));

            console.log(this.img_default);

        }
    },
    watch: {
        //通过数据监听的方式将共有人模板中的信息同步到ruleForm.commonArr中

    },
    methods: {
        backUrl(url,file_config){
          this.ruleForm[file_config["field"]].push(url)
        },
        delUrl(index,file_config){
          this.ruleForm[file_config["field"]].splice(index,1)
          this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
        },
        //身份证双面
        backCardImage(files) {
          this.ruleForm.iddbimage = c.name;
          this.img_default.iddbimage = "";
        },
        getBothZ(value) { //共有人数据
            this.appendZ = value;
        },
        getBothS(value) { //共有人数据
            this.appendS = value;
        },
        //证明文件
        hasdocumentary(rule, value, callback) { //验证规则
            if (this.showtransferProve) {
                callback();
            } else {
                callback(new Error("请上传证明文件！"));
            }
        },
        //确认书
        hasQrfile(rule, value, callback) { //验证规则
            if (this.showQrfile) {
                callback();
            } else {
                callback(new Error("请上传网上确认书！"));
            }
        },
        hasBusinessLicense(rule, value, callback) { //验证规则
            if (this.showBusinessLicense) {
                callback();
            } else {
                callback(new Error("请上传营业执照！"));
            }
        },
        hasIddbimage(rule, value, callback) { //验证规则
            if (this.ruleForm.iddbimage ) {
              callback();
            } else {
              callback(new Error("请上传身份证正反面！"));
            }
        },
        hasIDC(rule, value, callback) { //验证规则
            if (this.showIDC) {
                callback();
            } else {
                callback(new Error("请上传身份证反面！"));
            }
        },
        hasOther(rule, value, callback) { //验证规则
            if (this.showOther) {
                callback();
            } else {
                callback(new Error("请上传身份证正反面！"));
            }
        },
        settransferProve(files){//证明文件
            // this.showtransferProve = true
            let data = new FormData();
            this.ruleForm.transferProve = files;

            let config = {
              headers: {
                "Content-Type": "multipart/form-data",
              }
            };
            data.append(
                "files",
                this.ruleForm.transferProve[0] ? this.ruleForm.transferProve[0] : ""
            );

            this.$http.post("/trademark/files/fupload", data, config)
                .then(res =>{
                  if(res.data.code == 200){
                    this.SussImg("transferProve");
                    let item = res.data.data

                    if (item.filePath != ""){
                      this.ruleForm.newTransferProve = item.filePath;
                    }
                    if (this.ruleForm.newTransferProve) {
                      this.showtransferProve = true
                    } else {
                      this.showtransferProve = false
                    }
                  }else{
                    this.FailureImg("transferProve");
                  }
            })


        },
        //确认书
        setSure(files) {
            this.ruleForm.qrfiles = files[0];
            console.log(files,"files");
            this.img_default["qrfiles"] = "";
            if (this.ruleForm.qrfiles) {
                this.showQrfile = true
            } else {
                this.showQrfile = false
            }
        },

        //营业执照
        setBusinessLicense(files) {
            this.ruleForm.BusinessLicense = files[0];
            if (!files[0]) {
                this.showBusinessLicense = false
                return;
            } else {
                this.showBusinessLicense = true
            }

            function fn(res) {
                try {
                    var data = res.data.data;
                    this.ruleForm.aassLicense = data.popath; //issue 识别失败就清除图片
                    if (this.ruleForm.aassPicType == 0 || !(this.ruleForm.aassNameCn)) { //身份证信息优先
                        this.ruleForm.aassNameCn = data.po.name;
                        this.ruleForm.aassAddCn = data.po.address;
                    }
                    this.SussImg("BusinessLicense");
                } catch (error) {
                    this.FailureImg("BusinessLicense");
                }
            }
            this.RecognitionImg(0, fn, "BusinessLicense");
            this.img_default['BusinessLicense'] = "";
            if (this.ruleForm.BusinessLicense) {
                this.showBusinessLicense = true
            } else {
                this.showBusinessLicense = false
            }
        },
        setIddbimage(files) {//正反面
            let data = new FormData();
            this.ruleForm.picdbcard = files;
            this.changedIDC = true;
            let config = {
              headers: {
                "Content-Type": "multipart/form-data",
              }
            };
            data.append(
                "picdbcard",
                this.ruleForm.picdbcard[0] ? this.ruleForm.picdbcard[0] : ""
            );
            data.append("picType", this.ruleForm.aassPicType==1?1:0);
            this.$http.post("/trademark/distinguish/picdis", data, config)
                .then(res =>{
                  let item = res.data.data;
                  if (item.picpath != ""){
                  this.ruleForm.iddbimage = item.picpath;
                  console.log(this.ruleForm.iddbimage);
                }
            })
        },


        setOther(files) {
            this.ruleForm.Other = files[0];
            if (!files[0]) {
                this.showOther = false
                return;
            } else {
                this.showOther = true
            }

            function fn(res) {
                try {
                    var data = res.data.data;
                    this.ruleForm.aassLicense = data.popath; //issue 识别失败就清除图片
                    this.ruleForm.aassNameCn = "";
                    this.ruleForm.aassAddCn = "";
                    this.SussImg("Other");
                } catch (error) {
                    this.FailureImg("Other");
                }
            }
            this.RecognitionImg(9, fn, "Other"); //其他
            this.img_default['Other'] = "";
            if (this.ruleForm.Other) {
                this.showOther = true
            } else {
                this.showOther = false
            }
        },

        //身份证
        setIDC(files) {
            this.ruleForm.IDC = files[0];
            if (!files[0]) {
                this.showIDC = false
                return;
            } else {
                this.showIDC = true
            }

            function fn(res) {
                try {
                    var data = res.data.data;
                    this.ruleForm.aassIDC = data.id_card
                    this.ruleForm.aassNameCn = data.pic.name
                    this.ruleForm.aassAddCn = data.pic.address
                    this.SussImg("IDC");
                } catch (error) {
                    this.FailureImg("IDC");
                }
            }
            this.RecognitionImg(1, fn, "IDC");
            this.img_default['IDC'] = "";
            if (this.ruleForm.IDC) {
                this.showIDC = true
            } else {
                this.showIDC = false
            }
        },

        FailureImg(img) { //图片上传失败或识别错误
            this.open1("图片上传出错!", "error"); //提示
            this.$set(this["ruleForm"], img, "");
            this.$set(this, 'show' + img, false);
            return "";
        },

        SussImg(img) { //图片上传成功
            this.open1("图片上传成功!"); //提示
            this.$set(this, 'show' + img, true);
            return "";
        },
        iddImg(){},

        RecognitionImg(type, fn, name) { //请求
            let _this = this;
            let data = new FormData();
            var url = "/trademark/distinguish/picdis";
            if (type == 0) { //营业执照
              data.append("picType", 0);
              data.append("picbussi", _this.ruleForm.BusinessLicense);
            } else if (type == 1) { //身份证等
              data.append("picType", 1);
              data.append("picidcard", _this.ruleForm.IDC);
            }else if (type == 2) { //身份证等
              data.append("picType", 0);
              data.append("picbussi", _this.ruleForm.iddbimage);
            }  else {
              data.append("picType", 0);
              data.append("picbussi", _this.ruleForm.Other);
            }
            //建议重写方法

            this["load" + name] = true; //加载中
            this.$http({
                method: "post",
                headers: {
                  "Content-Type": "multipart/form-data",
                },
                url: url,
                data: data,
            }).then(res => {
                this["load" + name] = false;
                fn.call(_this, res);
            }).catch((err) => {
                this["load" + name] = false; //加载不显示
                fn.call(_this, {});
            });
            return;

        },

        //返回上一步
        outStep() {
            this.$emit("wp", 1, "请填写申请业务信息");
        },
        //提示模板
        open1(msg, types = "success") {
            this.$message({
                message: msg,
                type: types,
            });
        },
        //弹出框的选项确认框
        handleClose(done) {
            // this.$confirm("确认关闭？")
            //   .then((_) => {
            //     done();
            //   })
            //   .catch((_) => {});
        },

        // 提交前验证
        testing(formName) {
          console.log(1);
          this.$refs[formName].validate((valid) => {
       // console.log(valid);
              if (valid == false) {
                  this.dialogVisible = false;
              } else {
                  if (this.showQrfile) {
                    // if(this.showtransferProve){
                      this.dialogVisible = true
                    // }else{
                    //   this.open1("证明文件未上传", "error");
                    //   return;
                    // }
                  } else {
                      this.open1("网上确认书未上传", "error");
                      return;
                  }

                  if (this.ruleForm.isComm == 1 && ((!this.appendZ.length) && (!this.appendS.length))) {
                      this.open1("请添加其他转让人（受让人）", "error");
                      this.dialogVisible = false
                  }
              }
          });
        },

        //表单提交事件
        submitForm(formName) {
            console.log(this.$store.state.alterData);
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //每次提交重新生成新的FormData用于储存新的数据
                    this.formData = new FormData();
                    this.dialogVisible = false;

                    /*************************************公共数据开始******************************************/
                    let arr = this.$store.getters.getRuleForm;
                    for (let key in arr) {
                        this.formData.append(key, arr[key]);
                    }
                    /*************************************公共数据结束******************************************/

                    /*************************************需要提交的数据开始******************************************/
                    this.formData.append("aassAddCn", this.ruleForm.aassAddCn);
                    this.formData.append("aassAddEn", this.ruleForm.aassAddEn);
                    this.formData.append("aassNameCn", this.ruleForm.aassNameCn);
                    this.formData.append("iddbimage", this.ruleForm.iddbimage);
                    this.formData.append("aassNameEn", this.ruleForm.aassNameEn);
                    this.formData.append("qrfiles", this.ruleForm.qrfiles ? this.ruleForm.qrfiles : "");
                    this.formData.append("transferProve", this.ruleForm.newTransferProve);
                    this.formData.append("transfereesType", this.ruleForm.aassPicType);
                    this.formData.append("businessLicense", this.ruleForm.aassLicense ? this.ruleForm.aassLicense : this.ruleForm.aassOther); //有营业传营业，无营业传其他
                    this.formData.append("IDAddress", this.ruleForm.aassIDC ? this.ruleForm.aassIDC : "");
                    this.formData.append("appNum", this.ruleForm.appNum);

                    // 其他附件
                    this.formData.append('otherfile', JSON.stringify(this.ruleForm.dengjichenluofile));
                    this.formData.append(
                        "branchNetworkId",
                        this.ruleForm.branchNetworkId
                    );
                    this.formData.append("classId", this.classId);
                    this.formData.append("isComm", this.ruleForm.isComm);
                    this.formData.append("optype", 1);
                    this.formData.append("postCodeCn", this.ruleForm.postCodeCn);
                    this.formData.append("ReceCn", this.ruleForm.ReceCn);
                    this.formData.append("ReceAddCn", this.ruleForm.ReceAddCn);
                    if (this.ruleForm.isComm == 1) { //是共有人
                        let proAppends = [];
                        let proAppends2 = [];
                        this.appendZ.forEach((item) => { //转让人数组proAppends
                            proAppends.push(item);
                        });
                        this.appendS.forEach((item) => { //受让人数组proAppends2
                            proAppends2.push(item);
                        });

                        this.formData.append("proAppends", JSON.stringify(proAppends));
                        this.formData.append("proAppends2", JSON.stringify(proAppends2));
                    } else {
                        this.formData.append("proAppends", {});
                    }
                    /*************************************需要提交的数据结束******************************************/
                    let urls = "";
                    if (this.$store.state.alterData.public) {
                        this.formData.append("id", this.$store.state.alterData.public.id);
                        urls = "trademark/proTTransfer/modifyNoCommit";
                    } else {
                        urls = "trademark/proTTransfer/firstSubmit";
                    }
                    //配置请求头
                    var config = {
                        header: {
                            "Content-Type": "multipart/form-data",
                        },
                    };

                    // axios向后端发送数据
                    this.$http
                        .post(urls, this.formData, config)
                        .then(function (response) {
                            //console.log(response);
                            //若状态码不为200则不跳转
                            if (response.data.code != 200) {
                                _this.open1("提交失败", "error");
                                return;
                            }

                            _this.centerDialogVisible = true;
                        })
                        .catch(function (error) {
                            _this.open1("提交时发生错误,请重试", "error");
                        });
                } else {
                    return false;
                }
            });
        },
        //跳转函数
        skip() {
          this.centerDialogVisible = false;
          this.open1("操作成功");
          this.$router.push({
              path: "/business/myBusiness/auditing",
          });
        },

        //点击添加共有人
        plus() {
            let objCommom = JSON.parse(JSON.stringify(this.ruleForm.commonArr[0]));
            this.ruleForm.commonArr.push(objCommom);
            //let objValue = JSON.parse(JSON.stringify(this.common[0]))
            this.ruleForm.common.push({
                name: "名称(中文)：",
                englishName: "(英文)：",
                site: "地址(中文)：",
                englishSite: "(英文)：",
                type: 1,
                partNameCh: "", //转让人名称（中文）
                partNameEn: "", //转让人名称（英文）
                partAddrCh: "", //转让人地址（中文）
                partAddrEn: "", //转让人地址（英文）
            });
        },
        pluss() {
            let objCommom = JSON.parse(JSON.stringify(this.ruleForm.commonArrs[0]));
            this.ruleForm.commonArrs.push(objCommom);
            //let objValue = JSON.parse(JSON.stringify(this.common[0]))
            this.ruleForm.commons.push({
                name: "名称(中文)：",
                englishName: "(英文)：",
                site: "地址(中文)：",
                englishSite: "(英文)：",
                type: 2,
                partNameCh: "", //转让人名称（中文）
                partNameEn: "", //转让人名称（英文）
                partAddrCh: "", //转让人地址（中文）
                partAddrEn: "", //转让人地址（英文）
            });
        },
        changeAassPicType() {
            this.ruleForm.aassNameCn = "";
            this.ruleForm.aassNameEn = "";
            this.ruleForm.aassAddCn = "";
            this.ruleForm.aassAddEn = "";
        }
    },

};
</script>

<style lang="less" scoped>
.btns {
    display: flex;
    justify-content: center;
    margin-top: 45px;

    .el-button {
        margin: 0 20px;
    }
}

.box2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    // margin-top: 100px;
    margin-left: -230px;
    width: 100%;
    min-height: 800px;

    .tle {
        font-size: 24px;
        color: #000;
    }

    .el-form {
        width: 100%;
    }

    .must,
    .select {
        display: flex;
        position: relative;
        left: -60px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 0 30px;
        border-radius: 10px;

        .inform {
            display: flex;
            align-items: center;
            position: absolute;
            top: 0;
            left: 100%;
            width: 250px;
            height: 32px;
            color: #F96900;
            font-size: 10px;
            line-height: 16px;

            img {
                margin: 11px;
                // margin: ;
            }

            .content {
                display: flex;
                flex-direction: column;

                .ts {
                    text-indent: 3em;
                }
            }
        }

        .el-form-item {
            width: 580px;
            // margin-right: ;
        }

        .inline {
            display: flex;

            .el-form-item {
                margin: 0;
                width: 290px !important;
            }

            margin-bottom: 22px;
        }
    }

    .must {
        margin-bottom: 20px;
    }

    .line {
        width: 55vw;
        max-width: 1200px;
        margin: 20px auto;
        margin-left: 217px;
        height: 1px;
        min-width: 630px;
        border-top: 1px dashed #d9d9d9;
    }

    .imgHint {
        margin: 5px;
        font-size: 12px;
        line-height: 17px;
        color: #F96900;
    }

    .affirm {
        font-size: 12px;
        color: #a0a3a5;

        a {
            text-decoration: none;
            color: #3685ff;
        }
    }

    .upload {
        margin: 20px 0;
    }

    .type-number {
        width: 250px;
    }

    .informs {
        position: absolute;
        width: 500px;
        font-size: 12px;
        color: #a0a3a5;

        a {
            text-decoration: none;
            color: #3685ff;
            color: #4c92ff;
        }
    }

    .notice {
        color: #F96900;
        font-size: 12px;
    }

    .tle {
        list-style: none;
        margin: 40px 0 20px;
        font-size: 24px;

        &~.tle {
            color: #bbb;
        }
    }

    .hint {
        color: #F96900;
        background-color: #fff;
        padding: 20px;

        .el-form-item__label {
            width: 150px;
        }

        img {
            width: 20px;
        }
    }

    .el-steps {
        width: 70%;
        height: 200px;
    }

    .el-button {
        display: inline;
        margin: 0 20px;
    }

    .common .el-button {
        background-color: #fff !important;
        border-color: #bbb !important;
    }
}

.dialog-footer {
    display: flex;
    justify-content: space-between;
    color: #fff;

    .lan {
        background-color: #2c9dfc !important;
        border-color: #2c9dfc !important;
    }
}

.dialog /deep/.el-form-item__label {
    width: 100px !important;
}

.dialog /deep/.el-form-item__content {
  margin-left: 100px !important;
  display: flex;
  justify-content: left;
}

.dialog /deep/.el-input {
    width: 250px;
}

.el-checkbox-group {
    line-height: 14px;
}

.el-radio/deep/.el-radio__inner:hover {
    border-color: #999999 !important;
}

.is-checked/deep/.el-radio__label,
.is-checked/deep/.el-checkbox__label {
    color: #333;
}

.is-focus .el-checkbox__inner {
    border-color: #999999 !important;
}

.el-checkbox/deep/.el-checkbox__inner:hover {
    border-color: #999999 !important;
}

.el-step__head.is-process {
    border-color: #f96900;
    color: #f96900 !important;
}

.hintMsg {
    /deep/.el-dialog__header {
        display: flex;
        justify-content: center;
        font-weight: bold;
    }

    .dialog-footer {
        justify-content: center;

        .el-button {
            border-color: #2c9dfc !important;
            background: #2c9dfc !important;
        }
    }
}

.cancel {
    background: #ccc;
    border-color: #ccc;
}

.btn-group-com {
    padding: 0 0 24px 180px;
}

//fiexed dialog 0902

/deep/ .el-dialog.el-dialog--center /deep/ {
    .el-dialog__header {
        padding: 0;
    }

    .el-dialog__body {
        padding: 20px;
    }

    .hint {
        color: #F96900;
        background-color: #fff;
        padding: 0;
        padding-bottom: 20px;
    }

    .el-button {
        margin: 0;
    }

    .el-form-item__label {
        width: 86px !important;
    }
}

//fixed 0904
/deep/ .el-loading-spinner {
    text-align: left;
    padding-left: 54px;
}

.upload /deep/ .upload-img {
    width: 150px;
}

.exam-img{
  position: absolute;
  top: 0;
  left: 460px;
}
.img-inform{
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    transform: translate(-50%,-50%);
  }
  span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      white-space: nowrap;
      margin-left: -100px;
      width: 50px;
      color: #f96900;
  }
}

//fiexed 证件照上传放大图片
.el-dialog__body {
    padding: 30px 30px 30px 30px;

    img {
      width: 439px;
    }
}
</style>
